<!--
 作者：ex_baiyc
 日期：2016-12-28
 功能：我的关注页面(修改成全部品牌按需加载)
 参数：
 事件：点击字母加载字母对应的品牌,点击品牌可从 我的关注 中添加/删除对应品牌
      上拉加载更多品牌
-->
<template>
  <div>
    <toolbar :view-title="viewTitle">
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        @click="this.$broadcast('goBack')">
      </div>
      <div
        class="rightButton"
        type="button"
        slot="right-button">
      </div>
    </toolbar>
    <!--编辑状态时展示-->
    <div v-show="!isEdit" class="concerns">
      <div class="search-box">
        <input placeholder="请输入关键字进行模糊查询" v-model="keyWords" id="keyWords">
      </div>
      <div class="clearfix">
        <div class="jump-tag float-left">
          <ul class="jump-ul float-left">
            <li class="jump-li" :class="[{ 'active-brand' : '我的关注' == activeBrand}]" @click="getCollBrand()">我的关注</li>
            <li class="jump-li" :class="[{ 'active-brand' : '所有品牌' == activeBrand}]" @click="getAllBrand()">所有品牌</li>
            <li class="jump-li" v-for="item in jumpUl" :class="[{ 'active-brand' : item == activeBrand}]"
                @click="getBrand(item)">{{item}}
            </li>
          </ul>
        </div>
        <scroller lock-x scrollbar-y use-pullup :pullup-config="pullupConfig" height="10.5rem" :pullup-status.sync="pullupStatus"
                  @pullup:loading="loadMoreBrand" v-ref:scroller>
          <div class="all-brand">
            <ul>
              <li v-for="item in allBrand"
                  :id="item.id || item.brand_id"
                  :class="[{ 'active' : myConcernsIDStr.indexOf(item.id) > -1 || myConcernsIDStr.indexOf(item.brand_id) > -1}]"
                  @click="add($event, item.id || item.brand_id)">
                {{item.brand}}
              </li>
            </ul>
          </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="pullupStatus === 'default'">上拉加载更多</span>
            <span class="pullup-arrow" v-show="pullupStatus === 'down' || pullupStatus === 'up'" :class="{'rotate': pullupStatus === 'up'}">加载完成!</span>
            <span v-show="pullupStatus === 'loading'">加载中</span>
            <span v-show="pullupStatus === 'noMoreData'">加载完成!</span>
            <span v-show="pullupStatus === 'noData'">无品牌!</span>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import scroller from 'vux/dist/components/scroller'

  export default {
    components: {
      Toolbar,
      scroller
    },
    data () {
      return {
        pullupStatus: 'default',
        scrollerUUID: '',
        myConcernsStr: '',
        myConcernsIDStr: '',
        viewTitle: '我的关注',
        activeBrand: '我的关注',
        myConcernsId: [],
        myConcerns: [],
        allBrand: [],
        isEdit: false,
        jumpUl: ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
        pullupConfig: {
          pullUpHeight: 0,
          height: 0
        },
        capital: '',
        rows: 50,
        page: 1
      }
    },
    computed: {},
    methods: {
      goBack: function () {
        window.history.back()
      },
//      添加到我的关注,如果没有在我的关注中 就添加 , 否则删除
      add: function ($event, id) {
        var _this = this
        var brand = $event.target.innerText
        var brandId = $event.target.id
        if (this.myConcernsIDStr.indexOf(id) === -1) {
          if (_this.myConcerns.length >= 10) {
            window.alert('关注品牌不能超过10个！')
            return
          }
          this.$http.post(window.interface.addCollBrand, {'brand': brand, 'brand_id': brandId}).then((res) => {
            this.$http.post(window.interface.collBrand, {
              capital: this.capital,
              rows: this.rows,
              page: this.page
            }).then(function (res) {
              if (this.activeBrand === '我的关注') {
                this.allBrand = res.json().collectBrands
              } else if (this.activeBrand === '所有品牌') {
              }
              this.myConcerns = res.json().collectBrands
              this.myConcernsStr = JSON.stringify(res.json().collectBrands)
              this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
            })
          })
        } else {
          this.$http.post(window.interface.delCollBrand, {'brand': brand, 'brand_id': brandId}).then((res) => {
            this.$http.post(window.interface.collBrand, {
              capital: this.capital,
              rows: this.rows,
              page: this.page
            }).then(function (res) {
              if (this.activeBrand === '我的关注') {
                this.allBrand = res.json().collectBrands
              } else if (this.activeBrand === '所有品牌') {
              }
              this.myConcerns = res.json().collectBrands
              this.myConcernsStr = JSON.stringify(res.json().collectBrands)
              this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
            })
          })
        }
      },
//      点击字母索引请求对应的品牌列表
      getBrand: function (item) {
        if (document.getElementsByClassName('xs-plugin-pullup-container')[0]) {
          document.getElementsByClassName('xs-plugin-pullup-container')[0].style.display = 'block'
        }
        this.pullupStatus = 'default'
        this.keyWords = ''
        this.page = 1
        this.activeBrand = this.capital = item
//        this.$dispatch('changeLoadingStatus', true)
        this.$http.post(window.interface.collBrand, {
          capital: this.capital,
          rows: this.rows,
          page: this.page
        }).then(function (res) {
          var data = res.json()
          if (!data.success) {
            this.pullupStatus = 'noData'
//            this.$broadcast('pullup:disable', this.scrollerUUID)
          }
//          将 scroller 状态设置为启用
          this.$broadcast('pullup:enable', this.scrollerUUID)
          this.$dispatch('changeLoadingStatus', false)
          this.allBrand = res.json().brands
          this.myConcerns = res.json().collectBrands
          this.myConcernsStr = JSON.stringify(res.json().collectBrands)
          this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
//          this.$nextTick(() => {
          this.$refs.scroller.reset({top: 0})
//          })
        })
      },
      getAllBrand: function () {
        this.activeBrand = '所有品牌'
        this.capital = ''
        this.page = 1
        this.$http.post(window.interface.collBrand, {
          capital: this.capital,
          groupByCap: false,
          rows: this.rows,
          page: this.page
        }).then(function (res) {
//          this.$dispatch('changeLoadingStatus', false)
          this.$broadcast('pullup:enable', this.scrollerUUID)
          this.allBrand = res.json().brands
          this.myConcernsStr = JSON.stringify(res.json().collectBrands)
          this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
          this.$refs.scroller.reset({top: 0})
        })
      },
//      获取我的关注列表
      getCollBrand: function (uuid) {
        if (document.getElementsByClassName('xs-plugin-pullup-container')[0]) {
          document.getElementsByClassName('xs-plugin-pullup-container')[0].style.display = 'none'
        }
//      点击字母时重新将 scroller 启用
        this.$broadcast('pullup:enable', this.scrollerUUID)
        this.activeBrand = '我的关注'
//        this.$dispatch('changeLoadingStatus', true)
        this.$http.post(window.interface.collBrand, {
          capital: '',
          rows: this.rows,
          page: this.page
        }).then(function (res) {
//          this.$dispatch('changeLoadingStatus', false)
          this.allBrand = res.json().collectBrands
          this.myConcernsStr = JSON.stringify(res.json().collectBrands)
          this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
//        将 scroller 的状态重置并且滚动至顶部
          this.$refs.scroller.reset({top: 0})
        })
      },
//      上拉时加载更多品牌
      loadMoreBrand: function (uuid) {
        this.scrollerUUID = uuid
        if (this.activeBrand === '我的关注') {
          return
        } else if (this.activeBrand === '所有品牌') {
          this.page++
          this.$http.post(window.interface.collBrand, {
            groupByCap: false,
            rows: this.rows,
            page: this.page,
            blike: this.keyWords || ''
          }).then(function (res) {
//          this.$dispatch('changeLoadingStatus', false)
            if (res.json().success) {
              for (let i = 0; i < res.json().brands.length; i++) {
                this.allBrand.push(res.json().brands[i])
              }
            } else {
              this.$broadcast('pullup:disable', uuid)
            }
            this.myConcerns = res.json().collectBrands
            this.myConcernsStr = JSON.stringify(res.json().collectBrands)
            this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
            if (res.json().success && res.json().brands.length < 50) {
//          加载到最后一页时 将 scroller 状态设置为禁用
              this.pullupStatus = 'noMoreData'
              this.$broadcast('pullup:disable', uuid)
            }
            this.$broadcast('pullup:reset', uuid)
          })
        } else {
          this.page++
          this.$http.post(window.interface.collBrand, {
            capital: this.capital,
            rows: this.rows,
            page: this.page,
            blike: this.keyWords || ''
          }).then(function (res) {
//          this.$dispatch('changeLoadingStatus', false)
            if (res.json().success) {
              for (let i = 0; i < res.json().brands.length; i++) {
                this.allBrand.push(res.json().brands[i])
              }
            } else {
              this.$broadcast('pullup:disable', uuid)
            }
            this.myConcerns = res.json().collectBrands
            this.myConcernsStr = JSON.stringify(res.json().collectBrands)
            this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
            if (res.json().success && res.json().brands.length < 50) {
//          加载到最后一页时 将 scroller 状态设置为禁用
              this.pullupStatus = 'noMoreData'
              this.$broadcast('pullup:disable', uuid)
            }
            this.$broadcast('pullup:reset', uuid)
          })
        }
      }
    },
    ready: function () {
      if (document.getElementsByClassName('xs-plugin-pullup-container')[0]) {
        document.getElementsByClassName('xs-plugin-pullup-container')[0].style.display = 'none'
      }
//      获取我的关注列表
      this.getCollBrand()
//      输入框聚焦时改变页面样式
      var brandAInput = document.getElementById('keyWords')
      brandAInput.onfocus = function () {
        document.body.setAttribute('id', 'inputFocus')
      }
      brandAInput.onblur = function () {
        document.body.removeAttribute('id')
      }
      var inputEle = document.getElementById('keyWords')
      inputEle.addEventListener('input', (event) => {
        this.page = 1
        var newV = event.target.value.replace(/(^\s*)|(\s*$)/g, '')
        if (newV !== '') {
          if (this.activeBrand === '所有品牌') {
            this.$http.post(window.interface.collBrand, {
//              capital: this.capital,
              groupByCap: false,
              blike: newV || '',
              rows: this.rows,
              page: this.page
            }).then(function (res) {
              //          this.$dispatch('changeLoadingStatus', false)
              this.allBrand = res.json().brands
              this.myConcernsStr = JSON.stringify(res.json().collectBrands)
              this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
              this.$refs.scroller.reset({top: 0})
            })
          } else {
            this.$http.post(window.interface.collBrand, {
              capital: this.capital,
              blike: newV || '',
              rows: this.rows,
              page: this.page
            }).then(function (res) {
              //          this.$dispatch('changeLoadingStatus', false)
              this.allBrand = res.json().brands
              this.myConcernsStr = JSON.stringify(res.json().collectBrands)
              this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
              this.$refs.scroller.reset({top: 0})
            })
          }
        }
      })
    },
    watch: {
//      'keyWords': function (newV) {
//        this.page = 1
//        this.$http.post(window.interface.collBrand, {
//          capital: this.capital,
//          blike: newV,
//          rows: this.rows,
//          page: this.page
//        }).then(function (res) {
//          //          this.$dispatch('changeLoadingStatus', false)
//          this.allBrand = res.json().brands
//          this.myConcernsStr = JSON.stringify(res.json().collectBrands)
//          this.myConcernsIDStr = JSON.stringify(res.json().collectBrands)
//          this.$refs.scroller.reset({top: 0})
//        })
//      }
    }
  }

</script>
<style lang="scss" scoped>
  .concerns {
    padding-top: 1rem;
    height: 85vh;

  .search-box {
    height: .8rem;
    margin: .2rem .4rem;
  }

  input {
    padding-left: .3rem;
    width: 95%;
    height: .8rem;
    line-height: 100%;
    border: 1px solid #eee;
    background: #f8f8f8 url("../../../static/img/icon-search.png") no-repeat 95% center / .27rem .3rem;
  }

  .title {
    padding-top: 2vh;
    padding-bottom: 2vh;
    font-size: .36rem;
  }

  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../../static/img/btn-back.png') no-repeat center / 100%;
  }

  .rightButton {
    font-size: .28rem;
  }

  .all-brand {

  /*height: 75vh;*/
  /*overflow-y: hidden;*/

  ul {

  li {
    padding-left: .2rem;
    height: 1rem;
    line-height: 1rem;

  &:nth-child(odd) {
    background-color: #EFF6FF;
  }

  &:nth-child(even) {
    background-color: #FAFCFF;
  }

  }
  }
  }

  ::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 10px;
  }

  .active {
    background-image: url(../../../static/img/filter-active-bg.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 7%;
  }

  .jump-ul {
    height: 75vh;
    overflow: scroll;
    border-right: 1px solid rgba(238, 238, 238, 1);
  }

  .jump-li {
    width: 21.3vw;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
  }

  .active-brand {
    background: #4A90E2;
    color: #FFF;
  }

  }
</style>
